<template>

  <div>

    <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
      <el-form :model="form"  ref="ruleForm"  name="el-form-sys-user-add-name" id="el-form-sys-user-add-id" >
        <el-form-item label="*用户名" :label-width="formLabelWidth" prop="username">
          <el-input v-model="form.username" name="username" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="*密码" :label-width="formLabelWidth" prop="password">
          <el-input v-model="form.password" type="password"  name="password" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="*确认密码" :label-width="formLabelWidth" prop="passwordOk">
          <el-input v-model="form.passwordOk" type="password"  name="passwordOk" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="*真实姓名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.realName" name="name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="所属组织" :label-width="formLabelWidth" prop="dept">
          <el-input v-model="dept" name="dept"  v-on:click.native="_pnameClick" :readonly="true" autocomplete="off"></el-input>
        </el-form-item>


        <el-form-item label="性别" prop="sex" :label-width="formLabelWidth">
          <el-radio-group v-model="form.sex">
            <el-radio  label="男">男</el-radio>
            <el-radio  label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
          <el-input v-model="form.age" name="age" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
          <el-input v-model="form.phone" name="phone" autocomplete="off"></el-input>
        </el-form-item>


        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="mail">
          <el-input v-model="form.mail" name="mail" autocomplete="off"></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="_ok">确 定</el-button>
      </div>
    </el-dialog>


    <SysDeptSelects ref="sysDeptSelectsModel" @on-result-change="_selectBack"></SysDeptSelects>
  </div>

</template>

<script>
  import  SysDeptSelects from './SysDeptSelects'
    export default {
      components:{
        SysDeptSelects
      },
      data(){
          return{
            form:{
              username:'',
              sex:'男',
              realName:'',
              password:'',
              passwordOk:'',
              dept:'',
              age:'',
              phone:'',
              mail:'',
              deptIds:[

              ]
            },
            dept:'',
            dialogFormVisible: false,
            formLabelWidth: '120px'
          }
      },
      methods:{

          _open(){

            this.form.username=undefined;
            this.form.password=undefined;
            this.form.dept=undefined;

            this.form.name='';
              this.form.password='';
              this.form.passwordOk='';
              this.form.dept='';
              this.form.age='';
              this.form.phone='';
              this.form.mail='';
              this.form.deptIds=[

            ];
            this.dept='';
            this.form = JSON.parse(JSON.stringify(this.form));
              this.dialogFormVisible=true;
          },

        _pnameClick(){

          this.$refs.sysDeptSelectsModel._open();
        },


          _ok(){
            let userData= this.form;
            userData.dept=this.dept;
            if (userData.username.trim()==''){
              this.$message({
                type: 'success',
                message: '用户名不能为空!'
              });
              return false;
            }
            if (userData.password.trim()==''){
              this.$message({
                type: 'success',
                message: '密码不能为空!'
              });
              return false;
            }
            if (userData.passwordOk.trim()==''){
              this.$message({
                type: 'success',
                message: '请确认密码!'
              });
              return false;
            }
            if (userData.passwordOk!=userData.password){
              this.$message({
                type: 'success',
                message: '两次密码不一致请确认!'
              });
              return false;
            }

            if (undefined === userData.id){
              this.$http.post('/api/base/sys_user/add',userData).then(res=>{
                console.log('res----------------',res)
                if (res.data.data){
                  this.$message({
                    type: 'success',
                    message: '添加成功!'
                  });
                  this.$emit('on-result-change')
                  this.dialogFormVisible=false;
                } else {
                  this.$message({
                    type: 'success',
                    message: '添加失败!'
                  });

                }
              }).catch(err=>{
                this.$message({
                  type: 'info',
                  message: '添加失败'
                });
              })

            } else {
              this.$http.put('/api/base/sys_user/'+userData.id,userData).then(res=>{
                this.$message({
                  type: 'success',
                  message: '编辑成功!'
                });
                this.$emit('on-result-change')
                this.dialogFormVisible = false;

              }).catch(err=>{
                this.$message({
                  type: 'info',
                  message: '编辑失败'
                });
              })
            }
          },

        _selectBack(data){
            let length =data.length;
            let deptIds=[];
            for (let i=0;i<length;i++) {
              deptIds[i]=data[i].label;
              this.form.deptIds.push(data[i].id);
            }
          this.dept=deptIds.join(',');

        },

      },
    }
</script>

<style scoped>

</style>
